<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车列表</title>
  <link rel="stylesheet" href="./css/list.css">
  <script src="./js/cookie.js"></script>
  <script src="./js/requset.js"></script>
</head>

<body>
  <div class="w">
    <h1>购物车列表</h1>
    <ul>

    </ul>
  </div>
  <script>
    // console.log(getCookie('userid'));
    const ul = document.querySelector('.w ul')
    // 增加
    function add(id) {
      // 添加购物车，本质就是将当前商品数据存储下来，到购物车页面的时候获取出来展示
      console.log(id);
      request({
        url: '/cart/api/add',
        method: 'post',
        headers: {
          Authorization: localStorage.getItem('token')
        },
        data: {
          goodsid: id,
          goodsnumber: 1,
          userid: getCookie('userid')
        }
      }).then(res => {
        // console.log(res);
        flushed()
      })
    }
    //减少
    function decrease(id) {
      request({
        url: '/cart/api/removeOne',
        method: 'post',
        headers: {
          Authorization: localStorage.getItem('token')
        },
        data: {
          goodsid: id,
          goodsnumber: 1,
          userid: getCookie('userid')
        }
      }).then(res => {
        // console.log(res);
        flushed()
      })
    }
    //清空
    function empty(id) {
      request({
        url: `/cart/api/cartgoods/${getCookie('userid')}`,
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then((res) => {
        alert(res.msg)
      })
    }
    //值修改
    function changenumber() {
      console.log(e);
      // request({
      //   url: '/cart/api/changenumber',
      //   method: 'post',
      //   data: {
      //     goodsid: id,
      //     goodsnumber: value,
      //     userid: getCookie('userid')
      //   }
      // }).then(res => {
      //   // console.log(res);
      //   flushed()
      // })
    }
    // 刷新
    flushed()
    function flushed() {
      request({
        url: `/cart/api/cartgoods/${getCookie('userid')}`,
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then((res) => {
        console.log(res);
        let data = res.data
        // console.log(data);
        let html = ''
        data.forEach(element => {
          html += `<li>
          <img src="${element.list.img_small_logo}" alt="">
        <div class="title">
          <p>${element.list.title}</p>
          <p>￥ ${element.list.price}</p>
        </div>
        <div>
          <button onclick = "decrease('${element.list._id}')">-</button>
          <input type="text" value="${element.quantity}" onchange="changenumber()">
          <button onclick = "add('${element.list._id}')">+</button>
        </div>
          </li>`
        })
        if (html) {
          html += `<div class="rem">清空</div>`
        }
        console.log(html);
        ul.innerHTML = html
      }).catch((err) => {
        console.log(err);
      });
    }


  </script>
</body>

</html>